<template>
  <a-spin :spinning="spinning" tip="没有评分数据,正在返回……">
    <GoBack style="margin-bottom: 10px" />
    <a-table :columns="columns" :data-source="data" rowKey="app_user_id" :pagination="paginationProps">
      <template #action="{ record }">
        <a @click="checkDetail()">查看具体打分情况</a>
        <check-score-detail ref="openChildDrawer" :interviewId="interviewId" :appUserId="record.app_user_id" />
      </template>
    </a-table>
  </a-spin>
</template>
<script lang="ts">
import { defineComponent, Ref, ref, onMounted } from 'vue'
import GoBack from '../../../components/goback.vue'
import CheckScoreDetail from '../../../components/CheckScoreDetail.vue'
import { useRoute, useRouter } from 'vue-router'
import { get } from '../../../utils/request/request'

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    width: '20%',
    align: 'center',
    ellipsis: true
  },
  {
    title: '班级',
    dataIndex: 'class_name',
    align: 'center',
    width: '20%'
  },
  { title: '最高得分', dataIndex: 'max', width: '15%', align: 'center' },
  { title: '最低得分', dataIndex: 'min', width: '15%', align: 'center' },
  { title: '平均得分', dataIndex: 'avg', width: '15%', align: 'center' },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    align: 'center',
    width: '20%',
    slots: { customRender: 'action' }
  }
]

interface DataItem {
  app_user_id: number
  name: string
  class_name: string
  max: number
  min: number
  avg: number
}

const data: Ref<DataItem[]> = ref([])

const token: string = localStorage.getItem('token') as string
const spinning = ref<boolean>(false)

//操作栏
const useOperationEffect = () => {
  const openChildDrawer = ref()
  const checkDetail = () => {
    openChildDrawer.value.showDrawer()
  }
  return { openChildDrawer, checkDetail }
}

//网络请求
const useHttpEffect = () => {
  const route = useRoute()
  const router = useRouter()
  const id = route.params.id
  // 分页配置
  const paginationProps = ref({
    current: 1,
    pageSize: 10,
    total: 20,
    showSizeChanger: true,
    pageSizeOptions: ['5', '10', '15', '20'],
    // showQuickJumper: true,
    showTotal: (total: string) => `共${total}条打分情况`,
    onChange: (current: number, pageSize: number) => changePage(current, pageSize),
    onShowSizeChange: (current: number, pageSize: number) => changePage(current, pageSize)
  })

  const changePage = async (page: number, limit: number) => {
    data.value = []
    const res: any = await get(`/admin/api/v1/recruitment/interview/${id}/score/list?page=${page}&limit=${limit}`, token)
    console.log(res)
    if (res?.status_code === 0) {
      if (res?.data == null) {
        spinning.value = true
        setTimeout(() => {
          spinning.value = false
          router.back()
        }, 1000)
      } else {
        data.value = res.data
        paginationProps.value.current = res?.pagination?.page
        paginationProps.value.pageSize = res?.pagination?.limit
        paginationProps.value.total = res?.pagination?.total
      }
    }
  }
  return { paginationProps, changePage }
}

export default defineComponent({
  components: { GoBack, CheckScoreDetail },
  setup() {
    const { openChildDrawer, checkDetail } = useOperationEffect()
    const { paginationProps, changePage } = useHttpEffect()
    const route = useRoute()
    const interviewId = ref<string>(route.params.id as string)

    onMounted(() => {
      changePage(paginationProps.value.current, paginationProps.value.pageSize)
    })
    return {
      spinning,
      data,
      columns,
      openChildDrawer,
      checkDetail,
      interviewId,
      paginationProps
    }
  }
})
</script>

<style lang="less" scoped>
.btn {
  padding-bottom: 15px;
  text-align: right;
}
body {
  position: relative;
}
.box {
  position: relative;
  min-height: 700px;
}
.pagination {
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>
